<template>
  <div>
    <van-nav-bar
      style="background-color: Gainsboro;"
      title="最近播放"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <van-cell v-for="item in video" :name="item.id" :key="item.id">
        <div class="item">
          <van-image
            width="10rem"
            height="7rem"
            fit="cover"
            position="left"
            src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"/>
          <div class="right">
            <p class="title">{{ item.movieid }}</p>
            <p class="time">观看{{ item.id }}分钟</p>
          </div>
        </div>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import httpApi from '@/http';


  export default {
    data() {
      return {
        movie:'',
        video:{
          id:'',
          movie_url:'',
          movieid:''
        },
        list: [],
        loading: false,
        finished: false,
        form:{
          movie:'1'
        }
      };
    },
    methods: {

      onLoad() {
      // 异步更新数据
      // setTimeout 仅做示例，真实场景中一般为 ajax 请求
      setTimeout(() => {
        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }

        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },

      onClickLeft() {
        this.$router.push('/home/my')
      },

      getMovie(){
        httpApi.userApi.queryVideo().then(res=>{
          this.video = res.data.data
          console.log('观看记录',res.data.data)
          console.log('观看记录id',this.video.id)
        })
      },

      getmovies(name){
        let params = { id:Number(name), page:1,pagesize:1}
        httpApi.movieApi.queryID(params).then(res=>{
          this.form.movie = res.data.data.result
          console.log('通过id查询结果', this.form.movie)
        })
      },

    },



    mounted () {
      this.getMovie()
      this.getmovies(this.video.movieid)
    },
  }
</script>

<style lang="scss" scoped>
.item{
  display: flex; 
  // justify-content: space-between;
  font-size: 18px;
  // padding: 16px 22px;
  border-bottom: 1px solid #9a9a9a;
}
.right{
  padding: 10px;
}
.right .title{
  font-size: 16px;
  margin-bottom: 50px;
}
.right .time{
  font-size: 14px;
  color: #9a9a9a;
}
</style>